<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>Hello World</p>


<table border="1">
    <tr>
        <td bgcolor="gray">1</td>
        <td bgcolor="gray">2</td>
    </tr>

    <tr>
        <td bgcolor="gray">3</td>
        <td bgcolor="gray">4</td>
    </tr>

    <tr>
        <td bgcolor="gray">a</td>
        <td bgcolor="gray">b</td>
    </tr>
</table>


    <style>
        p{
            color:red;
        }
    </style>
    <p>这是一个P</p>
    <p>这是一个P</p>
    <p>这是一个P</p>
    <p>这是一个P</p>

    <p style="color:red">这是style为红色的</p>
    <p>这是一个没有style的p</p>


<-----元素选择器------>

<style>
    p{
        color:red;
    }
</style>

<p>p元素</p>
<p>p元素</p>
<p>p元素</p>

id选择器

<style>
    p{
        color:red;
    }
    #p1{
        color:blue;
    }
    #p2{
        color:green;
    }
</style>

<p>没有id的p</p>
<p id="p1">id=p1的p</p>
<p id="p2">id=p2的p</p>


类选择器

<style>
    .pre{
        color:blue;
    }
    .after{
        color:green;
    }
</style>

<p class="pre">前3个</p>
<p class="pre">前3个</p>
<p class="pre">前3个</p>

<p class="after">后3个</p>
<p class="after">后3个</p>
<p class="after">后3个</p>


/* 同时根据元素名和class来选择 */

<style>
    p.blue{
        color:blue;
    }
</style>

<p class="blue">class=blue的p</p>
<span class="blue">class=blue的span</span>


/*这是一个注释*/




/*设置元素尺寸*/

<style>
    p#percentage{
        width:50%;
        height:50%;
        background-color:pink;
    }
    p#pix{
        width:180px;
        height:50px;
        background-color:green;
    }
</style>

<p id="percentage"> 按比例设置尺寸50%宽 50%高</p>

<p id="pix"> 按象素设置尺寸  180px宽 50 px高</p>
双击选中所有代码





背景颜色
    属性名background-color
    颜色的值可以采用3种方式
    1. 预定义的颜色名字
    比如red,gray,white,black,pink，参考颜色速查手册
    2. rgb格式
    分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
    3. 16进制的表示
    #00ff00 等同于 rgb(0,255,0)

<style>
    p.gray {background-color: gray;}
    h1 {background-color: transparent}
    h2 {background-color: rgb(250,0,255)}
    h3 {background-color: #00ff00}
</style>

<p class="gray">灰色</p>
<h1>透明背景，默认即透明背景</h1>
<h2>紫色</h2>
<h3>绿色背景</h3>








图片作为背景
<style>
    div#test
    {
        background-image:url(-);
        width:200px;
        height:100px;
    }
</style>

<div id="test">
    这是一个有背景图的DIV
</div>



背景重复
background-repeat属性
值可以选
repeat; 水平垂直方向都重复
repeat-x; 只有水平方向重复
repeat-y; 只有垂直方向重复
no-repeat; 无重复

<style>
    div#norepeat
    {
        background-image:url(-);
        width:200px;
        height:100px;
        background-repeat: no-repeat;
    }
    div#repeat-x
    {
        background-image:url(/study/background_small.jpg);
        width:200px;
        height:100px;
        background-repeat: repeat-x;
    }
</style>


<div id="norepeat">
    背景不重复
</div>


<div id="repeat-x">
    背景水平重复
</div>



文本
属性名color
颜色的值可以采用3种方式
1. 预定义的颜色名字
比如red,gray,white,black,pink
2. rgb格式
分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
3. 16进制的表示
#00ff00 等同于 rgb(0,255,0)

<style>
    div#colorful{
        color: #6d212e
    }

</style>

<div id="colorful">
    粉红色
</div>

对齐
属性:text-align
值：left,right,center
div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提。

但是，span却看不出右对齐效果，为什么呢？
因为span是内联元素其默认宽度就是其文本内容的宽度
简单说就是文本已经粑在其边框上了，对齐是看不出效果来的

使用了后面的样式风格，让div和span的边框显露出来，便于理解本知识点
用到了边框和外边距
<style>
    div#left{
        text-align:left;
    }
    /*让div和span的边框显露出来，便于理解本知识点*/
    div,span{
        border: 1px gray solid;
        margin:10px;
    }
    div#right{
        text-align:right;
    }
    div#center{
        text-align:center;
    }
    span#right{
        text-align:right;
    }
</style>

<div id="left">
    左对齐
</div>
<div id="right">
    右对齐
</div>
<div id="center">
    居中
</div>

<span id="right">
span看不出右对齐效果
</span>


文本修饰
属性：text-decoration
值： overline
<style type="text/css">
    h1 {text-decoration: overline}
    h2 {text-decoration: line-through}
    h3 {text-decoration: underline}
    h4 {text-decoration:blink}
    .a {text-decoration: none}
</style>

<h1>上划线</h1>
<h2>删除效果</h2>
<h3>下划线</h3>
<h4>闪烁效果，大部分浏览器已经取消该效果</h4>
<a href="https://how2j.cn/">默认的超链</a>
<a class="a" href="https://how2j.cn/">去掉了下划线的超链</a>







行间距
属性：line-height
值：数字或者百分比
<style>
    p{
        width:200px;
    }

    .p{
        line-height:200%;
    }
</style>

<p>
    默认行间距
    默认行间距
    默认行间距
    默认行间距
    默认行间距
    默认行间距
    默认行间距
    默认行间距
    默认行间距
    默认行间距
    默认行间距
    默认行间距
    默认行间距
</p>

<p class="p">
    200%行间距
    200%行间距
    200%行间距
    200%行间距
    200%行间距
    200%行间距
    200%行间距
    200%行间距
    200%行间距
    200%行间距
    200%行间距
</p>




字符间距
属性：letter-spacing
值： 数字
<style>
    p{
        width:200px;
    }
    .p{
        letter-spacing:2;
    }
</style>

<p>
    abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>

<p class="p">
    abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>


单词间距
属性：word-spacing
值： 数字
<style>
    p{
        width:200px;
    }
    .p{
        word-spacing:10;
    }
</style>

<p>
    abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>

<p class="p">
    abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>


首行缩进
属性：text-indent
值： 数字
<style>
    p{
        width:200px;
    }

    .p{
        text-indent:50;
    }
</style>

<p>
    没有缩进效果的一段文字没有缩进效果的
    一段文字没有缩进效果的一段文字没有
    缩进效果的一段文字
</p>

<p class="p">
    有缩进效果的一段文字有缩进效
    果的一段文字有缩进效果的一段文字
    有缩进效果的一段文字有缩进效果的一段
    文字
</p>



大小写
属性：text-transform
值：
uppercase 全部大写
capitalize 首字母大写
lowercase 全部小写
<style>
    p.u {text-transform:uppercase}
    p.c {text-transform:capitalize}
    p.l {text-transform:lowercase}

</style>

<p class="u">
    abcD
</p>

<p class="c">
    abcD
</p>

<p class="l">
    abcD
</p>




空白格
属性：white-space
值：
normal 默认。多个空白格或者换行符会被合并成一个空白格
pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。
pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。
nowrap 一直不换行，直到使用br

<style>
    p.n {white-space:normal}
    p.p {white-space:pre}
    p.pw {white-space:pre-wrap}
    p.nw {white-space:nowrap}

</style>

<p class="n">
    在默认情况下，多个     空白格或者
    换行符

    会被     合并成一个空白格
</p>

<p class="p">
    保留所有的    空白格
    以及换行符
    相当于pre元素
    特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字
</p>

<p class="pw">
    保留所有的    空白格
    以及换行符
    相当于pre元素
    特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字
</p>

<p class="nw">
    不会换行
    不会换行
    不会换行
    不会换行
    不会换行
    不会换行
    直到br<br/>才换行
</p>


和字体相关的属性

尺寸
属性：font-size
值：数字或者百分比
<style>
    p.big{
        font-size:30px;
    }

    p.small{
        font-size:50%;
    }

    p.small2{
        font-size:0.5em;
    }
</style>

<p >正常大小</p>
<p class="big">30px大小的文字</p>
<p class="small">50%比例的文字</p>
<p class="small2">0.5em 等同于 50%比例的文字</p>


风格
font-style:
normal 标准字体
italic 斜体
<style>
    p.n{
        font-style:normal;
    }

    p.i{
        font-style:italic;
    }
</style>

<p >标准字体</p>
<p class="n">标准字体</p>
<p class="i">斜体</p>


粗细
属性 font-weight
normal 标准粗细
bold 粗一点
<style>
    p.n{
        font-weight:normal;
    }
    p.b{
        font-weight:bold;
    }
</style>

<p >标准字体</p>
<p class="n">标准字体</p>
<p class="b">粗一点</p>


字库
属性font-family
<style>
    p.f1{
        font-family:"Times New Roman";
    }

    p.f2{
        font-family:Arial;
    }
    p.f3{
        font-family:宋体;
    }
    p.f4{
        font-family:黑体;
    }
    p.f5{
        font-family:楷体;
    }
    p.f6{
        font-family:微软雅黑;
    }
</style>

<p >默认字库 font family:default </p>
<p class="f1">设置字库 font-family: Times New Roman</p>
<p class="f2">设置字库 font-family: Arial</p>
<p class="f3">设置字库 font-family: 宋体, 这种字体是IE默认字体</p>
<p class="f4">设置字库 font-family: 黑体</p>
<p class="f5">设置字库 font-family: 楷体</p>
<p class="f6">设置字库 font-family: 微软雅黑, 这个字体是火狐默认字体</p>



声明在一起
<style>
    p.all{
        font:italic bold 30px "Times New Roman";
    }

</style>

<p>默认字体</p>

<p class="all">斜体的 粗体的 大小是30px的 "Times New Roman" </p>
双击选中所有代码


鼠标样式

<style>
    span{
        cursor:crosshair;
    }
</style>

<span>鼠标移动到这段文字上，就看到鼠标样式变成了十字架</span>
效果	样式
鼠标移动上来看效果	cursor:default
鼠标移动上来看效果	cursor:auto
鼠标移动上来看效果	cursor:crosshair
鼠标移动上来看效果	cursor:pointer
鼠标移动上来看效果	cursor:e-resize
鼠标移动上来看效果	cursor:ne-resize
鼠标移动上来看效果	cursor:nw-resize
鼠标移动上来看效果	cursor:n-resize
鼠标移动上来看效果	cursor:se-resize
鼠标移动上来看效果	cursor:sw-resize
鼠标移动上来看效果	cursor:w-resize
鼠标移动上来看效果	cursor:text
鼠标移动上来看效果	cursor:wait
鼠标移动上来看效果	cursor:help
鼠标移动上来看效果	cursor:not-allowed



表格布局
属性:table-layout
automatic; 单元格的大小由td的内容宽度决定
fixed; 单元格的大小由td上设置的宽度决定
注：只对连续的英文字母起作用，如果使用中文就看不到效果

<style>
    table.t1{
        table-layout:automatic;
    }

    table.t2{
        table-layout:fixed;
    }

</style>

<table class="t1" border="1" width="100%">
    <tr>
        <td width="10%">abcdefghijklmnopqrstuvwxyz</td>
        <td width="90%">abc</td>
    </tr>
</table>

<table class="t2" border="1" width="100%">
    <tr>
        <td width="50px">abcdefghijklmnopqrstuvwxyz</td>
        <td >abc</td>
    </tr>
</table>


表格边框
属性：border-collapse
值：
separate:边框分隔
collapse:边框合并
<style>
    table.t1{
        border-collapse:separate;
    }

    table.t2{
        border-collapse:collapse;
    }
</style>

<table class="t1" border="1" width="200px">
    <tr>
        <td width="50%">边框分离</td>
        <td width="50%">边框分离</td>
    </tr>
</table>

<br/>
<br/>

<table class="t2" border="1" width="200px">
    <tr>
        <td width="50%">边框合并</td>
        <td width="50%">边框合并</td>
    </tr>
</table>


边框风格
属性： border-style
solid: 实线
dotted:点状
dashed:虚线
double:双线
<style>
    .solid{
        border-style:solid;
    }
    .dotted{
        border-style:dotted;
    }
    .dashed{
        border-style:dashed;
    }
    .double{
        border-style:double;
    }

</style>

<div> 默认无边框div </div>

<div class="solid"> 实线边框  </div><br/>

<div class="dotted"> 点状边框  </div> <br/>
<div class="dashed"> 虚线边框  </div> <br/>
<div class="double"> 双线边框  </div> <br/>


边框颜色
属性：border-color
值：red,#ff0000,rgb(255,0,0)

<style>
    .red{
        border-style:solid;
        border-color:red;
    }

</style>

<div> 默认无边框div </div>
<div class="red"> 实线红色边框  </div><br/>


边框宽度
属性：border-width
值：数字

<style>
    .red{
        border-style:solid;
        border-color:red;
        border-width:1px;
    }

    .default{
        border-style:solid;
        border-color:red;
    }

</style>

<div> 默认无边框div </div>

<div class="red"> 实线红色细边框  </div><br/>

<div class="default"> 实线红色默认宽度边框  </div><br/>


都放在一起
属性：border
值：颜色 风格 宽度
<style>
    .red{
        border:1px dotted LightSkyBlue;
    }

</style>

<div> 默认无边框div </div>

<div class="red"> 点状天蓝色细边框  </div><br/>


只有一个方向有边框
通过制定位置，可以只给一个方向设置边框风格，颜色和宽度
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
top,bottom,left,right 分别对应上下左右
<style>
    div{
        width:150px;
        height:150px;
        border-top-style:solid;
        border-top-color:red;
        border-top-width: 50px;
        background-color:lightgray;
    }
</style>

<div>
    只有上面有边框
</div>


有交界的边都有边框
比如上和左就是有交界的，而上和下就没有交界
当有交界的边同时出现边框的时候，就会以倾斜的形式表现交界线。
<style>
    div.lefttop{
        width:150px;
        height:150px;
        border-top-style:solid;
        border-top-color:red;
        border-top-width: 50px;
        border-left-style:solid;
        border-left-color:blue;
        border-left-width: 50px;
        background-color:lightgray;
    }

    div.alldirection{
        width:150px;
        height:150px;
        border-top-style:solid;
        border-top-color:red;
        border-top-width: 50px;
        border-left-style:solid;
        border-left-color:blue;
        border-left-width: 50px;
        border-bottom-style:solid;
        border-bottom-color:green;
        border-bottom-width: 50px;
        border-right-style:solid;
        border-right-color:yellow;
        border-right-width: 50px;
        background-color:lightgray;
    }
</style>

<div class="lefttop">
    左边和上边都有边框
</div>
<br>
<div class="alldirection">
    四边都有边框　
</div>



块级元素和内联元素的边框区别
可以看到，块级元素div默认是占用100%的宽度
常见的块级元素有div h1 p 等
而内联元素span的宽度由其内容的宽度决定
常见的内联元素有 a b strong i input 等
<style>
    .red{
        border:1px solid red;
    }

</style>

<div> 默认无边框div </div>

<div class="red"> 实线红色细边框  </div><br/>
<span class="red"> 实线红色细边框  </span><br/>


左内边距
属性:padding-left
值：数字
指的是，元素中的内容，与边框之间的距离
<style>
    .red{
        border:5px solid red;
        background-color:green;
    }

    .pad-left{
        border:5px solid red;
        background-color:green;
        padding-left:50px;
    }

</style>

<span class="red"> 无内边距的span  </span><br/> <br/>

<span class="pad-left"> 左边距为50的span  </span><br/>



内边距，写1个和写4个的区别
属性：padding
值：如果只写一个，即四个方向的值
值：如果写四个，即四个方向的值
上 右 下 左,依顺时针的方向依次赋值
<style>
    .pad-left-one{
        border:5px solid red;
        background-color:green;
        padding: 20;
    }

    .pad-left-four{
        border:5px solid red;
        background-color:green;
        padding: 10 20 30 40;
    }

</style>
<br/>
<span class="pad-left-one"> padding:20的span  </span> <br/> <br/> <br/> <br/>

<span class="pad-left-four">
padding: 10 20 30 40 的span </span> <br/> <br/> <br/> <br/>


当内边距的值少于4个的时候
如果缺少左内边距的值，则使用右内边距的值。
如果缺少下内边距的值，则使用上内边距的值。
如果缺少右内边距的值，则使用上内边距的值。
举例说明
这是完整4个的
padding: 10 20 40 80
如果只有3个
padding: 10 20 40
那么left取right
padding: 10 20 40 = padding: 10 20 40 20
如果只有两个
padding: 10 20
那么bottom取top，left取right
padding: 10 20 = padding:10 20 10 20
如果只有一个
padding:10
那么right取top，bottom取top，left取top
padding:10 = padding:10 10 10 10



属性: margin-left
值：数字
指的是元素边框和元素边框之间的距离

注：像span这样的内联元素，默认情况下，只有左右外边距，没有上下外边距。
为了观察上下外边距的效果，可以采用块级元素，比如div

<style>
    .red{
        border:1px solid red;
        background-color:green;
    }

    .margin{
        border:1px solid red;
        background-color:green;
        margin-left:10px;
    }

</style>

<span class="red"> 无外边距的span  </span>
<span class="red"> 无外边距的span  </span>

<br/>

<span class="red"> 无外边距的span  </span>
<span class="margin"> 有左外边距的span  </span>



边框模型
真正决定一个元素的表现形式，是由其边框模型决定的
由图所示
蓝色框即为内容
width:70px 表示内容的大小
红色框即为边框
内容到边框之间的距离，即为内边距 5px
灰色框，是指边框与其他元素之间的距离，即为外边距：10px
<style>
    .box{
        width:70px;
        padding:5px;
        margin: 10px;
    }

    div{
        border:1px solid gray;
        font-size:70%;
    }
</style>

<div>
    其他元素
</div>

<div class="box">
    内容宽度70px <br><br>
    内边距：5px <br> <br>
    外边距：10px <br>
</div>

<div>
    其他元素
</div>



超链状态有4种
link - 初始状态，从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候


超链状态
伪类，所谓的伪类即被选中的元素处于某种状态的时候
超链状态有4种
link - 初始状态，从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候
<style>
    a:link {color: #FF0000}
    a:visited {color: #00FF00}
    a:hover {color: #FF00FF}
    a:active {color: #0000FF}
</style>

<a href="http://www.12306.com">超链的不同状态</a>





隐藏元素有两种方式
display:none;
visibility:hidden;

隐藏
<style>
    div.d{
        display:none;
    }

    div.v{
        visibility:hidden;
    }
</style>

<div>可见的div1</div>
<div class="d">隐藏的div2,使用display:none隐藏</div>
<div>可见的div3</div>
<div class="v">隐藏的div4,使用visibility:hidden隐藏</div>
<div>可见的div5</div>


如果把所有的css都写在html文件里面，一旦样式比较多的时候，就会显得不易维护
这个时候就会选择把所有的css内容，放在一个独立文件里
然后在html中引用该文件
通常这个文件会被命名为style.css

<style>
    .p1{
        color:red;
    }

    .span1{
        color:blue;
    }
</style>

<p class="p1">红色</p>

<span class="span1">蓝色</span>

<link rel="stylesheet" type="text/css" href="/study/style.css" />
<link rel="stylesheet" type="text/css" href="https://how2j.cn/study/style.css" />

<p class="p1">红色</p>

<span class="span1">蓝色</span>



外部文件style.css的内容是

.p1{
color:red;
}
.span1{
color:blue;
}

<link rel="stylesheet" type="text/css" href="https://how2j.cn/study/style.css" />

<style>
    .p1{
        color:green;
    }
</style>

<p class="p1">p1 颜色是绿色，优先使用靠的最后出现的</p>




style标签上的与style属性冲突

style标签上的与style属性冲突
优先使用style属性

<style>
    .p1{
        color:green;
    }
</style>

<p class="p1" style="color:red">p1 颜色是红色，优先使用style属性</p>





如果样式上 增加了!important，则优先级最高，甚至高于style属性
<style>
    .p1{
        color:green !important;
    }

</style>

<p class="p1" style="color:red">p1
    颜色是绿色，优先使用!important样式</p>

</body>
</html>